<form action="" class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">规则名</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" id="rule" name="rule" disabled="disabled"  value="{$reply.rule}"/>
		</div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">关键词</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" id="keyword" name="keyword" disabled="disabled" value="{$reply.keyword}"/>
		</div>
	</div>
	
	<div class="form-group">
	    <label class="col-sm-2 control-label">自动回复类型</label>
	    <div class="col-sm-2">
	    	<select class="form-control" id="type-select" name="type" datatype="*">{$reply.typeOptions}</select>
	    </div>
	</div>
	
	<!-- 文本 -->
	<div class="form-group reply reply-text">
		<label class="col-sm-2 control-label">文本内容</label>
		<div class="col-sm-4">
			<textarea class="form-control" name="text" rows="5" id="text">{$reply.text}</textarea>
		</div>
	</div>
	
	<!-- 图文 -->
	<div class="form-group reply reply-news">
		<label class="col-sm-2 control-label">图文列表</label>
		<div class="col-sm-5">
			<div id="news-result">
				<ul class="news-edit-lists">
				</ul>
			</div>
		</div>
	</div>
	
	<!-- 链接 -->
	<div class="form-group reply reply-link">
		<label class="col-sm-2 control-label">链接标题</label>
		<div class="col-sm-4">
			<input type="text" id="link_title" class="form-control" name="link_title" value="{$reply.link_title}" placeholder="请输入链接标题" />
		</div>
	</div>
	<div class="form-group reply reply-link">
		<label class="col-sm-2 control-label">链接描述</label>
		<div class="col-sm-4">
			<textarea class="form-control" name="link_description" rows="2" id="link_description" placeholder="请输入链接描述">{$reply.link_description}</textarea>
		</div>
	</div>
	<div class="form-group reply reply-link">
		<label class="col-sm-2 control-label">链接封面地址</label>
		<div class="col-sm-4">
			<input type="text" id="link_pic" name="link_pic" value="{$reply.link_pic}" placeholder="请输入链接封面地址" class="form-control margin-bottom" />
			<input type="file" name="file_upload" id="image_upload" />
		</div>
	</div>	<div class="form-group reply reply-link">
		<label class="col-sm-2 control-label">链接地址</label>
		<div class="col-sm-4">
			<input type="text" id="link_url" class="form-control" name="link_url" value="{$reply.link_url}" placeholder="请输入链接标题" />
		</div>
	</div>
			
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<input type="hidden" name="id" value="{$reply.id}"/>
			<input type="hidden" name="news" id="news-id" value="" />
			<button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/replyPost" data-action-callback="actionCallback">保存更改</button>
		</div>
	</div>
</form>

<!-- 图文素材列表 -->
<section id="news">
	<ul class="news-lists" id="news-lists"></ul>
</section>

<!-- 图文预览 -->
<section class="msg-preview col-sm-4" id="preview">
	<h3 class="msg-title">图文标题</h3>
	<div class="msg-cover">
		<img src=""/>
	</div>
	<p class="msg-description">摘要</p>
</section>
<style type="text/css">
	.panel-body{position: relative;}
	.msg-preview{position: absolute; right: 20px; top: 80px; border: 1px solid #ccc; border-radius: 5px; padding:0 10px 10px 10px; width:360px;}
	.msg-preview .msg-cover{height:160px; overflow:hidden;}
	.msg-preview img{width: 100%; background: #eee; border:none;}
</style>
<script type="text/javascript">
	var news_data = {$newsJSON};
</script>
<script type="text/javascript" src="__PUBLIC__/Style/My/Default/js/getNewsLists.js"></script>
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">
	
    function actionCallback( extra, data ) {
   		// 弹窗关闭
   		$(window.parent.$.find('#winReply')[0]).animate({ opacity: "hide" }, "slow");
    }
    
	$(function(){
		// 根据类型显示元素
		function showElement(type){
			$('.reply').hide();
			$('.reply-'+type).show();
			$('#news').hide();
			$('#preview').hide();
			$("#news-lists").html("");
			if(type == 'news'){
				showLists();
			} else if(type == 'link'){
				showPreview();
			}
		}
		
		// 显示图片列表
		function showLists(){
			$('#news').show();
			$MoveTools.init({'listUrl': "__CONTROLLER__/getNewsListPost/p/"});
		}
		
		// 显示预览
		function showPreview(){
			$('#preview').show();
			$('#preview .msg-title').html($('#link_title').val() || '图文标题' );
			$('#preview .msg-description').html($('#link_description').val() || '图文描述' );
			$("#preview .msg-cover img").attr("src", $('#link_pic').val());
		}
		
		// 默认显示
		showElement($('#type-select option:selected').val());
		// 类型变化
		$('#type-select').on('change', function(){
			showElement($(this).val());
		});
		
		// 实时预览
		$("#link_title").keyup(function(){
			showPreview();
		});
		$("#link_description").keyup(function(){
			showPreview();
		});
		
		// 上传图片
	    $("#image_upload").uploadify({
	        'multi'			:	false,
	        'fileSizeLimit' : 	'200kb',
	        'buttonText'	:	'选择图片',
	        'fileTypeDesc' 	: 	'Image Files',
	        'fileTypeExts' 	: 	'*.jpg; *.png',
	        'swf'			: 	'__PUBLIC__/Style/Common/uploadify/uploadify.swf',
	        'uploader'		: 	'__MODULE__/Upload/uploadOne',
	        'onUploadSuccess'	: function(data, res){
	        	var url = eval("(" + res + ")").extra.url;
	        	$("#link_pic").val( url );
	        	showPreview();
	        }
	    });

	});
</script>